<!--
 * @Author: your name
 * @Date: 2021-03-31 09:05:16
 * @LastEditTime: 2021-04-09 18:37:51
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \shop\training-group-5-warehouse\dianshang\src\views\WeChat\index.vue
-->
<!-- 模拟微信页面 -->
<template>
  <div class="weChat">
    <header>
      <span @click="() => $router.go(-1)">
        <svg-icon iconClass="back" class="zhuo_back"></svg-icon>
      </span>
      <span>迪丽热巴</span>
      <span></span>
    </header>
    <main>
      <dl v-for="(item, index) in texts" :key="index">
        <span></span>
        <dd @click="handlePushBargain(item)">{{ item.actions }}</dd>
        <dt>
          <img :src="item.avatar" alt />
        </dt>
      </dl>
    </main>
    <footer>
      <van-icon name="bar-chart-o" size="25px" @click="handleAdd" />
      <input type="text" v-model="val" @input="handleSetInput($event)" />
      <van-icon name="smile-o" size="25px" />
      <van-icon name="add-o" size="25px" />
    </footer>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      val: "",
    };
  },
  computed: {
    ...mapState("bargain", ["texts"]),
  },
  methods: {
    ...mapMutations("bargain", ["SET_TEXTS"]),
    //发送
    handleAdd() {
      if (this.val !== "") {
        this.SET_TEXTS(this.val);
      }
      this.val = "";
    },
    //修改双向绑定
    handleSetInput(event) {
      this.val = event.target.value;
    },
    //跳转
    handlePushBargain(item) {
      if (item.actions === this.$route.query.url) {
        this.$router.push(this.$route.query.url.slice(21));
      }
    },
  },
  created() {
    this.val = this.$route.query.url;
  },
};
</script>

<style lang="scss" scoped>
.weChat {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  background: #f0f2f5;
  header {
    width: 100%;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    border-bottom: solid 1px #ccc;
    background: #f0f2f5;
    span {
      font-size: 20px;
    }
    span:nth-child(2) {
      font-weight: 600;
      font-size: 16px;
    }
  }
  main {
    flex: 1;
    overflow-x: scroll;
    dl {
      width: 100%;
      height: auto;
      display: flex;
      justify-content: space-between;
      padding: 0 10px;
      margin: 20px 0;
      span {
        flex: 1;
      }
      dt {
        margin: 0 10px;
        img {
          width: 50px;
          height: 50px;
        }
      }
      dd {
        font-size: 12px;
        background: chartreuse;
        text-align: center;
        padding: 5px 5px;
        min-height: 30px;
      }
    }
  }
  footer {
    width: 100%;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    background: rgb(228, 250, 246);
    input {
      flex: 1;
      width: 100px;
      height: 30px;
      margin: 0 10px;
      border: none;
      outline: none;
      background: #fff;
      border-radius: 10px;
      font-size: 12px;
    }
  }
}
</style>
